<template>
  <div class="container">
    <div class="header-inner">
      <div class="top-min-bar hidden-in-xs">
        <p class="language">简体中文
          <i class="hidden-in-xs fas fa-sort-down"></i>
        </p>
      </div>
      <img class="logo" :src="$api+header.logo_img.cf_value" alt="">
      <!-- Bigger-than-xs PC版 -->

      <ul class="hidden-in-xs nav-list">
        <!-- 如果不知道来源，则给首页加上高亮 -->
        <li :class="{'active':!(parseInt($route.params.active)>-1)}">
          <router-link to="/">美梦首页</router-link>
        </li>

        <!-- 如果知道来源，则给对应的栏目加上高亮 -->
        <li :class="{'active':$route.params.active==index}" v-for="(menu,index) in header.menu" :key="index">
          <router-link :to="menu.url+'/'+index">
            {{menu.cate_name}}
          </router-link>
        </li>
      </ul>
      <!-- Bigger-than-xs-end -->

      <!-- On-xs WAP版 -->
      <div class="xs-only">
        <i class="fas fa-bars" v-show="!nav_show" @click="nav_show=true"></i>
        <i class="fas fa-times" v-show="nav_show" @click="nav_show=false"></i>
        <ul v-show="nav_show" class="moblie-nav-list nav-list" @touchmove.stop.prevent="nav_show">
          <!-- 如果不知道来源，则给首页加上高亮 -->
          <li :class="{'active':!(parseInt($route.params.active)>-1)}">
            <router-link to="/">美梦首页</router-link>
          </li>
          <!-- 如果知道来源，则给对应的栏目加上高亮 -->
          <li v-for="(menu,index) in header.menu" :key="index" :class="{'active':$route.params.active==index}">
            <router-link :to="menu.url+'/'+index">{{menu.cate_name}}</router-link>
          </li>
        </ul>
      </div>
      <!-- On-xs-end -->
    </div>
  </div>
</template>
<script>
  export default {

    data() {
      return {
        nav_show: false,
        header: {

        }
      }
    },
    created: function () {
      let that = this;
      this.$axios.get(this.$api+'/api/header')
        .then(function (response) {

          that.header = response.data.header
        })
        .catch(function (response) {});
    },
    mounted: function () {}
  }

</script>

<style lang="less" scoped>
  @import url('../style/mixin.less');
  .container {
    width: 100%;
    background: #ffffff; // height: 135px;
    position: relative;

    .header-inner {
      max-width: 1166px;
      overflow: hidden;
      position: relative;
      margin: 0 auto;
      padding-bottom: 24px;
    }
    .fa-bars,
    .fa-times {
      font-size: 20px;
      color: #a17657;
      position: absolute;
      right: 15px;
      top: 15px;
    } // 语言选择
    .top-min-bar {
      width: 100%;
      line-height: 24px;
      overflow: hidden;

      .language {
        // edit：纯文本的话，不需要指定宽高，而是任由文本去撑开内容
        //   width: 48px;
        //   height: 12px;
        font-size: 12px;
        font-weight: normal;
        font-stretch: normal; // line-height: 24px;
        letter-spacing: 0px;
        color: #a17657;
        float: right;
        margin-right: 30px; //   edit：不要写那么多absolute *1
        //   right: 440px;
        //   position: absolute;
        //   top: 12px;
        .fa-sort-down {
          // font-size: 12px;
          letter-spacing: 0px;
          vertical-align: middle; // color: #a17657; 
          //   edit：不要写那么多absolute *2
          //   right: 418px;
          //   position: absolute;
          //   top: 15px;
          position: relative;
          top: -4px;
          margin-left: 2px;
        }
      }


    }
    .hidden-in-xs.nav-list {
      margin-top: 50px;
      float: right; //   position: absolute;
      //   top: 77px;
      //   left: 937px;
      li {
        list-style: none;
        float: left; // height: 17px;
        font-family: MicrosoftYaHei;
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 24px;
        letter-spacing: 0px;

        &+li {
          padding-left: 44px;
        }

        >a {
          color: #50311a;
          text-decoration: none;
        }

        &.active>a {
          color: #50311a;
          font-weight: bold;
        }

      }
    }
    .moblie-nav-list.nav-list {
      width: 100%;
      height: 100vh;;
      background: #FFF;
      position: fixed;
      left: 0;
      top: 44px;
      z-index: 1;
      li {
        height: 44px;
        font-size: 14px;
        line-height: 44px;
        text-align: left;
        color: #a17657;
        margin: 0 20px;
        border-bottom: 1px solid #a17657;
        a {
          .A-all-state( {
            color: unset;
            text-decoration: none;
          }
          )
        }
        &.active {
          border-bottom: 2px solid #a17657;
        }
        &:first-child {
          margin-top: 35px;
        }
        &:last-child {
          border-bottom: 2px solid #a17657;
        }
      }
    }
    .On-xs( {
      height: 44px;
    }
    );
    .logo {
      width: 396px;
      height: 89px;
      float: left; //   padding-left: 365px;
      //   padding-top: 23px;
      .On-xs( {
        width: 162px;
        height: 36px;
        padding-top: 0;
        margin-top: 4px;
        margin-bottom: 4px;
        padding-left: 15px;
      }
      );
    }
  }

</style>
